import React, { useRef, useEffect, useState } from 'react';
import { RobotInfo } from '../../types';

interface MapProps {
  mapData: {
    grids: {
      gridType: "NULL" | "BARRIER" | "DELIVER" | "ROBOT" | "PHARMACIST" | "COLLISION", 
      robotCount: number, 
      robotSerialNumber: string, 
    }[][], 
    rows: number, 
    columns: number, 
  } | null; 

  robotInfoList: RobotInfo[]; 
}

export function Map({ mapData,robotInfoList }: MapProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null); // 引用 canvas 元素
  const [cellSize, setCellSize] = useState(0); // 每个网格单元的大小

  // 更新每个网格的大小，当 mapData 的列数或 canvas 的大小发生变化时
  useEffect(() => {
    if (mapData) {
      const canvas = canvasRef.current;
      if (canvas) {
        setCellSize(canvas.width / mapData.columns); // 根据 mapData 的列数来设置每个单元格的大小
      }
    } else {
      const canvas = canvasRef.current;
      if (canvas) {
        setCellSize(canvas.width / 50); // 如果 mapData 为 null，使用默认的 10x10 网格
      }
    }
  }, [mapData?.columns]); // 当 mapData 的列数发生变化时更新

  // 绘制地图网格和网格元素（例如机器人、障碍物等）
  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas?.getContext('2d'); // 获取 2d 渲染上下文
    if (!canvas || !ctx) return;

    // 清除之前的画布内容
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制网格的轮廓（行和列）
    ctx.strokeStyle = '#e5e7eb'; // 网格的颜色
    const rows = mapData ? mapData.rows : 50; // 如果 mapData 不为空，使用 mapData 的行数
    const columns = mapData ? mapData.columns : 50; // 如果 mapData 不为空，使用 mapData 的列数

    // 绘制网格线（行和列）
    for (let i = 0; i <= columns; i++) {
      ctx.beginPath();
      ctx.moveTo(i * cellSize, 0);
      ctx.lineTo(i * cellSize, canvas.height);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(0, i * cellSize);
      ctx.lineTo(canvas.width, i * cellSize);
      ctx.stroke();
    }

    if (mapData && mapData.grids) {
      // 如果 mapData 存在，绘制网格单元的内容
      for (let rowIndex = 0; rowIndex < mapData.grids.length; rowIndex++) {
        for (let colIndex = 0; colIndex < mapData.grids[0].length; colIndex++) {
          // 获取当前网格的数据，如果没有数据，则使用默认值
          const grid = mapData.grids[rowIndex]?.[colIndex] || {
            gridType: 'NULL',
            robotCount: 0,
            robotSerialNumber: '',
          };

          const { gridType, robotCount, robotSerialNumber } = grid;
          const x = colIndex * cellSize; // 网格的 x 坐标
          const y = rowIndex * cellSize; // 网格的 y 坐标

          // 根据网格类型选择颜色
          switch (gridType) {
            case 'BARRIER':
              ctx.fillStyle = '#808080'; // 灰色表示障碍物
              break;
            case 'DELIVER':
              ctx.fillStyle = '#F7E306'; // 黄色色表示配送点
              break;
            case 'ROBOT':
              ctx.fillStyle = '#FFFFFF'; // 机器人背景色
              break;
            case 'PHARMACIST':
              ctx.fillStyle = '#8006D1'; // 蓝色表示药剂师
              break;
            case 'COLLISION':
              ctx.fillStyle = '#F20505'; // 红色表示碰撞区域
              break;
            default:
              ctx.fillStyle = '#ffffff'; // 默认空白网格
          }

          // 绘制当前网格单元
          ctx.fillRect(x, y, cellSize, cellSize);

          // 如果是机器人类型，则
          if (gridType === 'ROBOT' && robotSerialNumber) {
            //获取机器人状态
            const robot = robotInfoList.find(robot => robot.serialNumber === robotSerialNumber);
            const robotStatus = robot?.robotStatus || 'FREE';

            let robotColor = '#07EB66'; // 默认绿色
            switch (robotStatus) {
              case 'FREE':
                robotColor = '#07EB66'; // 空闲
                break;
              case 'MOVING':
                robotColor = '#000D9E' ; // 忙碌
                break;
              case 'QUEUING':
                robotColor = '#FFA600' ; // 忙碌
                break;
            }

            // 在网格中央绘制机器人
            ctx.beginPath();
            ctx.arc(x + cellSize / 2, y + cellSize / 2, cellSize / 3, 0, Math.PI * 2); // 绘制圆形
            ctx.fillStyle = robotColor; // 设置颜色
            ctx.fill();
            
            // 显示完整的序列号（将序列号显示在机器人的上方）
            ctx.fillStyle = '#000000'; // 黑色文本
            ctx.font = '10px Arial'; // 设置较小的字体
            ctx.textAlign = 'center'; // 设置文本对齐方式为居中
            ctx.textBaseline = 'bottom'; // 文本从底部开始绘制

            // 在机器人圆形上方绘制序列号
            ctx.fillText(robotSerialNumber, x + cellSize / 2, y + cellSize / 2 - cellSize / 3); 
          }
        }
      }
    }
  }, [mapData, cellSize]); // 当 mapData 或 cellSize 发生变化时重新绘制

  return (
    <div className="bg-white p-4 rounded-lg shadow-md">
      <h2 className="text-xl font-bold mb-4">系统地图</h2>
      <canvas
        ref={canvasRef} // 将 canvas 绑定到组件
        width={800} // canvas 宽度
        height={800} // canvas 高度
        className="border border-gray-200 w-full" // 设置 canvas 样式
      />
    </div>
  );
}
